<!--
 * @Author       : 邱狮杰
 * @Date         : 2021-09-01 14:33:51
 * @LastEditTime : 2021-09-08 10:28:35
 * @FilePath     : /newhope/src/components/game/idnex.vue
 * @Description  : 
-->
<script lang='ts'>
export interface Props {
	list: {
		img: string
		style: string
	}[]
}
</script>
<script setup lang='ts'>
import { withDefaults, ref } from 'vue'
import blueMilk from '/@/assets/images/bkg/blueMilk.png'
import greenMilk from '/@/assets/images/bkg/greenMilk.png'
const props = withDefaults(defineProps<{ list: { img: string, style: string, clicked: boolean, green?: boolean }[] }>(), { list: [] as any })
const onMikeClick = defineEmits(['onMikeClick'])
const choseIndex = ref<null | number>(null)
// transform: scale(1);
function mikeClickHandler(e: any, index: number) {
	choseIndex.value = index
	e.srcElement.style.animationPlayState = 'running'
	onMikeClick('onMikeClick', { index, total: props.list.length })
}
</script>
<template>
	<img
		class="mikeAnm"
		@click="e => mikeClickHandler(e, mikeIndex)"
		alt="mikeItem"
		v-for="mikeItem,mikeIndex in props.list"
		:key="mikeIndex"
		:src="choseIndex === mikeIndex ? mikeItem.green ? greenMilk : blueMilk : mikeItem.img"
		:style="[mikeItem.style]"
	/>
</template>

<style lang='scss' scoped>
.mikeAnm {
	transition: all 0.3s;
	transform: scale(1);
	-webkit-animation: roll-out-top 0.6s ease-in both paused;
	animation: roll-out-top 0.6s ease-in both paused;
}
@-webkit-keyframes roll-out-top {
	0% {
		-webkit-transform: translateY(0) rotate(0deg);
		transform: translateY(0) rotate(0deg);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateY(-800px) rotate(-540deg);
		transform: translateY(-800px) rotate(-540deg);
		opacity: 0;
	}
}
@keyframes roll-out-top {
	0% {
		-webkit-transform: translateY(0) rotate(0deg);
		transform: translateY(0) rotate(0deg);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateY(-800px) rotate(-540deg);
		transform: translateY(-800px) rotate(-540deg);
		opacity: 0;
	}
}
</style>
